import React from 'react';
import ReactEcharts from '@/components/Echarts';

const getOption = data => ({
    tooltip: {
        trigger: 'item',
        formatter(params) {
            const html = `<div><i style="display: inline-block;vertical-align: middle;width:8px;height:8px;border-radius: 100%;margin-right:6px;background:${params.color};"></i><span style="color:#aaa">${params.name}：</span><span>${params.percent}%</span></div>`;
            return html;
        }
    },
    legend: {
        type: 'scroll',
        x: 'center',
        data: data.map(item => item.name)
    },
    series: [
        {
            type: 'pie',
            radius: '70%',
            center: ['50%', '60%'],
            data,
            label: {
                show: false
                // normal: {
                //     formatter: '{b}\n{d}%',
                //     position: 'inner'
                // }
            },
            labelLine: {
                show: false
                // normal: {
                //     show: false
                // }
            }
        }
    ]
});

const PeopleOld = ({ data }) => <ReactEcharts option={getOption(data)} />;

export default PeopleOld;
